<template>
  <page-header-wrapper :title="false">
    <a-card
      title="组员微信管理"
    >
      <template slot="extra">
        <a-button size="small" type="primary" @click="state">统计</a-button>
      </template>
      <!--        <div class="table-page-search-wrapper">-->
      <!--          <a-form-model :model="queryParam" layout="inline">-->
      <!--            <a-row :gutter="20">-->
      <!--              <a-col :md="6" :sm="24">-->
      <!--                <a-form-model-item label="顾问姓名">-->
      <!--                  <a-select-->
      <!--                    v-model="queryParam['filter[uid]']"-->
      <!--                    placeholder="选择要查询的顾问"-->
      <!--                  >-->
      <!--                    <a-select-option v-for="(item,index) in memberList" :key="index" :value="index">{{item}}</a-select-option>-->
      <!--                  </a-select>-->
      <!--                </a-form-model-item>-->
      <!--              </a-col>-->
      <!--              <a-col :md="6" :sm="24">-->
      <!--                <a-form-model-item label="微信ID">-->
      <!--                  <a-input v-model="queryParam['filter[wx_account]']" placeholder="输入微信ID"/>-->
      <!--                </a-form-model-item>-->
      <!--              </a-col>-->
      <!--              <template v-if="advanced">-->
      <!--                <a-col :md="6" :sm="24">-->
      <!--                  <a-form-model-item label="添加日期">-->
      <!--                    <a-range-picker @change="onChange" />-->
      <!--                  </a-form-model-item>-->
      <!--                </a-col>-->
      <!--              </template>-->
      <!--              <a-col :md="6" :sm="24">-->
      <!--                <a-form-model-item label="添加日期">-->
      <!--                  <a-range-picker @change="onChange" />-->
      <!--                </a-form-model-item>-->
      <!--              </a-col>-->
      <!--              <a-col :md="6" :sm="24">-->
      <!--                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">-->
      <!--                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
      <!--                  <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>-->
      <!--                  <a @click="toggleAdvanced" style="margin-left: 8px">-->
      <!--                    {{ advanced ? '收起' : '展开' }}-->
      <!--                    <a-icon :type="advanced ? 'up' : 'down'"/>-->
      <!--                  </a>-->
      <!--                </span>-->
      <!--              </a-col>-->
      <!--            </a-row>-->
      <!--          </a-form-model>-->
      <!--        </div>-->
      <div class="wechat_content">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.id"
          :columns="wxColumns"
          :data="wxData"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <div
            slot="filterRange"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-range-picker
              style="width: 228px; margin-bottom: 8px; display: block;"
              :value="createValue"
              @change="onChange"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 110px; margin-right: 8px"
              @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
              重置
            </a-button>
          </div>
          <div
            slot="filterSelect"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              show-search
              :placeholder="`选择${column.title}`"
              style="width: 188px; margin-bottom: 8px; display: block;"
              :value="selectedKeys[0]"
              :filter-option="filterOption"
              @change="(value) => setSelectedKeys(value ? [value] : [])"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              <a-select-option v-for="(item,index) in memberList" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <template slot='group_type' slot-scope='text'>
            {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
          </template>
          <template slot="wx_index" slot-scope="text, record, index">
            {{index + 1}}
          </template>
          <template slot="image2" slot-scope="text, record">
            <a @click="handlePreview(record.image2, record.id)">
              <img :src="record.image2" width="30" height="30" />
            </a>
          </template>
          <template slot="image" slot-scope="text, record">
            <a @click="handlePreview(record.image, record.id)">
              <img :src="record.image" width="30" height="30" />
            </a>
          </template>
          <template slot="sign" slot-scope="text, record">
            <div v-if="record.v_id != ''">
              <div v-if="record.yc_sign == 1">
                <a-rate :value="1" :count="1" :style="{ color: '#f00' }" @change="signWx(record.id)">
                  <a-icon slot="character" type="exclamation-circle" />
                </a-rate>
              </div>
              <div v-else>
                <a-rate :value="0" :count="1" :style="{ color: '#f00' }" @change="signWx(record.id)">
                  <a-icon slot="character" type="exclamation-circle" />
                </a-rate>
              </div>
            </div>
            <div v-else>
              <a-rate :value="0" :count="1" :style="{ color: '#ff0000' }" @change="signWx(record.id)">
                <a-icon slot="character" type="exclamation-circle" />
              </a-rate>
            </div>
          </template>
          <template slot="action" slot-scope="text,record">
            <a-badge :dot="record.is_read == 0">
              <a-button :disabled="record.is_read == 0" size="small" type="primary" @click="onSign(record.id)">操作</a-button>
            </a-badge>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="评价微信"
      v-model="visible"
      @ok="onSubmitExtend"
      @cancel="onCancel"
    >
      <a-textarea v-model="info['info[remark]']" :rows="4"></a-textarea>
    </a-modal>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel0">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <a-modal
      title="微信添加统计"
      v-model="stateVisible"
    >
      <a-tabs v-model="activeKey" @change="onTabs">
        <a-tab-pane key="1" tab="今日"></a-tab-pane>
        <a-tab-pane key="2" tab="昨日"></a-tab-pane>
      </a-tabs>
      <s-table
        bordered
        ref="t"
        size="small"
        :row-key="(record) => record.uid"
        :columns="stateColumns"
        :data="stateData"
      >
        <template slot="num" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
      </s-table>
    </a-modal>
    <a-modal
      title="微信记录"
      v-model="visible"
      :footer="null"
    >
      <a-form-model
        ref="form"
        :model="signForm"
        :rules="signRules"
      >
        <a-form-model-item label="问题" prop="question">
          <a-input type="text" v-model="signForm.question" placeholder="输入问题是什么" />
        </a-form-model-item>
        <a-form-model-item label="解决方案" prop="proposal">
          <a-textarea :rows="5" v-model="signForm.proposal" placeholder="给出解决方案及建议"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <div :style="{ textAlign: 'right' }">
            <a-button type="danger" style="margin-right:10px" @click="signGood">优秀</a-button>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { getMemberWechatList, getRemarkWx, getSignWx, getWechat, postRemarkWx, postSignWx, getExtend, signBad, setIsRead } from '@/api/wechat'
  import wechatColumns from '@/columns/wechat'
  const wxColumns = wechatColumns.list

  export default {
    components: {
      STable
    },
    name: 'SubWechat',
    data () {
      return {
        wxColumns,
        wxData: parameters => {
          return getMemberWechatList(Object.assign(parameters, this.queryParam)).then(res => {
            this.memberList = res.result.advisers
            return res.result
          })
        },
        memberList: {},
        queryParam: {},
        currentId: '',
        info: {},
        advanced: false,
        visible: false,
        previewVisible: false,
        previewImage: '',
        stateColumns: [
          {
            title: '组长姓名',
            dataIndex: 'leader_name'
          },
          {
            title: '顾问姓名',
            dataIndex: 'adviser_name'
          },
          {
            title: '添加数量',
            dataIndex: 'num',
            scopedSlots: { customRender: 'num' }
          }
        ],
        stateData: parameters => {
          return getWechat(Object.assign(parameters, this.queryParam2)).then(res => {
            return res.result
          })
        },
        signForm: {
          question: '',
          proposal: ''
        },
        signRules: {
          question: [{ required: true, message: '请输入问题是什么', trigger: true }],
          proposal: [{ required: true, message: '请输入解决方案', trigger: true }]
        },
        stateVisible: false,
        activeKey: '1',
        queryParam2: {},
        createValue: []
      }
    },
    methods: {
      onChange (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_created_at]'] = dateString[0]
        this.queryParam['filter[end_created_at]'] = dateString[1]
      },
      state () {
        this.activeKey = '1'
        this.queryParam2['filter[type]'] = '1'
        this.stateVisible = true
        this.$refs.t.refresh(true)
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleChange (value) {
        this.queryParam['filter[add_time]'] = value
      },
      signWx (id) {
        const app = this
        getSignWx(id).then(res => {
          const result = res.result.data
          if (result.yc_sign === 0 || !result.yc_sign) {
            app.$confirm({
              title: '是否标记为异常',
              onOk: () => {
                const d = {}
                d['info[yc_sign]'] = 1
                postSignWx(id, d).then(res => {
                  const data = res
                  if (data.status === 0) {
                    app.$refs.table.refresh(true)
                  }
                })
              }
            })
          } else {
            app.$confirm({
              title: '是否取消异常标记',
              onOk: () => {
                const d = {}
                d['info[yc_sign]'] = 0
                postSignWx(id, d).then(res => {
                  if (res.status === 0) {
                    app.$refs.table.refresh(true)
                  }
                })
              }
            })
          }
        })
      },
      async handlePreview (file, id) {
        const app = this
        app.previewImage = file
        app.previewVisible = true
        setIsRead(id).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      handleCancel0 ({ fileList }) {
        this.fileList = fileList
      },
      onCancel () {
        this.info = {}
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_created_at]']
        delete this.queryParam['filter[end_created_at]']
        this.$refs.table.refresh(true)
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      addModal (id) {
        const app = this
        app.currentId = id
        getRemarkWx(id).then(res => {
          if (res.status === 0) {
            this.info['info[remark]'] = res.result.data.remark
            this.visible = true
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      onSubmitExtend (id) {
        const app = this
        if (app.info['info[remark]'] === '') {
          app.$warning({
            title: '备注内容不能为空'
          })
          return false
        }
        postRemarkWx(app.currentId, app.info).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh(true)
            app.visible = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onTabs (key) {
        this.activeKey = key
        this.queryParam2['filter[type]'] = key
        this.$refs.t.refresh(true)
      },
      onSign (id) {
        const app = this
        app.currentId = id
        getExtend(app.currentId).then(res => {
          app.signForm.question = res.result.question
          app.signForm.proposal = res.result.proposal
          app.visible = true
        })
      },
      onSubmit () {
        const app = this
        app.$refs.form.validate(valid => {
          if (valid) {
            const form = {}
            for (const k in app.signForm) {
              form['info[' + k + ']'] = app.signForm[k]
            }
            signBad(app.currentId, 'wt', form).then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      signGood () {
        const app = this
        this.$confirm({
          title: '是否确认此条设为优秀微信',
          onOk: () => {
            signBad(app.currentId, 'yx').then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
  .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
